<template>
	<view>
		<!-- tabbar切换 -->
		<view class="tabbar">
			<view :class="tabbar == 0 ?'tabbaractive' :''" @tap="tabbar = 0">基本信息</view>
			<view :class="tabbar == 1 ?'tabbaractive' :''" @tap="tabbar = 1">设备信息</view>
		</view>
		<!-- 基本信息 -->
		<view style="background-color: #FFF;" v-if="tabbar == 0">
			<view class="info">
				<view class="name">店铺图片</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" width="120rpx" height="120rpx"
					@delete="deletePic" name="1" multiple :maxCount="1">
				</u-upload>
			</view>
			<view class="info-text">
				<view class="name">名称</view>
				<input type="text" placeholder="请输入" v-model="roomName">
			</view>
			<view class="info-text">
				<view class="name">起订时间(分钟)</view>
				<input type="text" placeholder="30" v-model="roomTime">
			</view>
			<view class="info-text">
				<view class="name">封顶价格</view>
				<input type="text" placeholder="500" v-model="roomCappedPrice">
			</view>
			<view class="info-text">
				<view class="name">销售量</view>
				<input type="text" placeholder="请输入" v-model="roomCount">
			</view>
			<view class="info-text">
				<view class="name">推荐人数</view>
				<input type="text" placeholder="请输入" v-model="roomPerson">
			</view>
			<view class="info-text-textarea">
				<view class="name">价格分区</view>
				<view class="fenqu">
					<scroll-view scroll-x="true" class="scroll" :scroll-with-animation="true" :scroll-left="scroll">
						<text :class="ind == index + 1 ? 'active active2' :''" v-for="(item,index) in hourlyPrice"
							:key="index" @click="selectItem(index,item)">{{item}}</text>
					</scroll-view>
					<swiper class="swiper"  @change="swiperChange" :current="ind-1" >
						<swiper-item>
							<input type="text"  placeholder="请输入价格" v-model="price">
							<input type="text"  placeholder="美团ID" v-model="mt_id">
						</swiper-item>
						<swiper-item>
							<input type="text" placeholder="请输入价格" v-model="price2">
							<input type="text" placeholder="美团ID" v-model="mt_id2">
						</swiper-item>
						<swiper-item>
							<input type="text" placeholder="请输入价格" v-model="price3">
							<input type="text" placeholder="美团ID" v-model="mt_id3">
						</swiper-item>
						<swiper-item>
							<input type="text" placeholder="请输入价格" v-model="price4">
							<input type="text" placeholder="美团ID" v-model="mt_id4">
						</swiper-item>
						<swiper-item>
							<input type="text" placeholder="请输入价格" v-model="price5">
							<input type="text" placeholder="美团ID" v-model="mt_id5">
						</swiper-item>
					</swiper>

				</view>
			</view>
			<view class="info-text-textarea">
				<view class="name">包间介绍</view>
				<textarea placeholder="请输入包间介绍" v-model="roomIntroduce"></textarea>
			</view>
			<button class="btn" @click="addRoom()">确认添加</button>
		</view>
		<!-- 设备信息 -->
		<view v-else style="background-color: #FFF;padding-top: 20rpx;height: 100%;">
			<!-- 类型 -->
			<view class="info-text">
				<view class="name">门锁类型</view>
				<view style="display: flex;align-items: center;width: 290rpx;justify-content: space-between;">
					<view :class="lockType == 0 ? 'actives' : 'weisele'" @click="lockType = 0">WI-FI</view>
					<view :class="lockType == 1 ? 'actives' : 'weisele'" @click="lockType = 1">蓝牙</view>
				</view>
			</view>
			<view class="info-text">
				<view class="name">门锁编号</view>
				<input type="text" placeholder="30" v-model="lockNO">
			</view>
			<view class="info-text">
				<view class="name">插座空开ID</view>
				<input type="text" placeholder="500" v-model="socketID">
			</view>
			<view class="info-text">
				<view class="name">空调开空ID</view>
				<input type="text" placeholder="请输入" v-model="ktiaoID">
			</view>
			<view class="info-text">
				<view class="name">音响ID</view>
				<input type="text" placeholder="请输入" v-model="yinxiangID">
			</view>
			<view class="info-text">
				<view class="name">灯光ID</view>
				<input type="text" placeholder="请输入" v-model="lamp_charge_id">
			</view>
			<view class="info-text">
				<view class="name">音响延迟(秒)</view>
				<input type="text" placeholder="请输入" v-model="delay">
			</view>
			<button class="btn" style="margin-top: 600rpx;" @click="addRoom()">确认添加</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				storeId: uni.getStorageSync('storeListId')[0],
				tabbar: 0,
				fileList1: [],
				imageText: '',
				// 名称
				roomName: "",
				// 起订时间(分钟)
				roomTime: "",
				// 封顶价格
				roomCappedPrice: "",
				// 销售量
				roomCount: "",
				// 推荐人数
				roomPerson: "",
				// 价格分区
				ind: 1,
				// 请输入价格
				price:'',
				price2:'',
				price3:'',
				price4:'',
				price5:'',
				// 美团ID
				mt_id:'',
				mt_id2:'',
				mt_id3:'',
				mt_id4:'',
				mt_id5:'',
				// 包间介绍
				roomIntroduce: "",
				// 门锁类型
				lockType: 0,
				// 门锁编号
				lockNO: "",
				// 插座空开ID
				socketID: "",
				// 空调开空ID
				ktiaoID: "",
				// 灯光
				lamp_charge_id:"",
				// 音响ID
				yinxiangID: "",
				// 音响延迟(秒)
				delay: "",
				hourlyPrice: ['1小时价格', '2小时价格', '4小时价格', '6小时价格', '8小时价格'],
				// 滚动条的位置
				scroll: '',
				hourPriceText: '1小时价格'
			}
		},
		methods: {
			// 滚动条位置
			selectItem(index, name) {
				this.ind = index + 1
				this.scroll = index * 20;
				this.hourPriceText = name;
			},
			swiperChange(e){
				this.ind = e.detail.current + 1;
				this.scroll = (this.ind - 1) * 20;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.app_url + '/login/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let url = JSON.parse(res.data).data
								.url
							this.imageText = url
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			addRoom() {
				// let roomPrice = this.roomPrice;
				// let roomMetuanID = this.roomMetuanID;
				// let price = '';
				// let price2 = '';
				// let price3 = '';
				// let price4 = '';
				// let price5 = '';
				// let mt_id = '';
				// let mt_id2 = '';
				// let mt_id3 = '';
				// let mt_id4 = '';
				// let mt_id5 = '';
				// switch (this.hourPriceText) {
				// 	case '1小时价格':
				// 		price = roomPrice;
				// 		mt_id = roomMetuanID;
				// 		break
				// 	case '2小时价格':
				// 		price2 = roomPrice;
				// 		mt_id2 = roomMetuanID;
				// 		break
				// 	case '4小时价格':
				// 		price3 = roomPrice;
				// 		mt_id3 = roomMetuanID;
				// 		break
				// 	case '6小时价格':
				// 		price4 = roomPrice;
				// 		mt_id4 = roomMetuanID;
				// 		break
				// 	case '8小时价格':
				// 		price5 = roomPrice;
				// 		mt_id5 = roomMetuanID;
				// 		break
				// 	default:
				// }
				this.https('/room/add', {
					store_id: this.storeId,
					image: this.imageText,
					name: this.roomName,
					min_time: this.roomTime,
					max_time: this.roomCappedPrice,
					sales: this.roomCount,
					nums: this.roomPerson,
					price: this.price,
					price2: this.price2,
					price3: this.price3,
					price4: this.price4,
					price5: this.price5,
					mt_id: this.mt_id,
					mt_id2: this.mt_id2,
					mt_id3: this.mt_id3,
					mt_id4: this.mt_id4,
					mt_id5: this.mt_id5,
					content: this.roomIntroduce,
					// 设备信息
					lock_type:this.lockType,
					lock_no:this.lockNO ? this.lockNO : '0',
					charge_id:this.socketID ? this.socketID : '0',
					lamp_charge_id:this.lamp_charge_id  ? this.lamp_charge_id : '0',
					air_charge_id:this.ktiaoID ? this.ktiaoID : '0',
					speaker_id:this.yinxiangID ? this.yinxiangID : '0',
					speaker_time:this.delay
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						success() {
							uni.navigateBack({
								
							})
						}
					})
					this.getStoreInfo();
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})

			},
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.tabbaractive {
		background-color: #00809F !important;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFF;

	}

	.weisele {
		width: 130rpx;
		height: 48rpx;
		background: #00809F;
		border-radius: 8rpx;
		opacity: 0.4;
		text-align: center;
		color: #FFF;
		font-size: 26rpx;
		line-height: 48rpx;
	}

	.actives {
		width: 130rpx;
		height: 48rpx;
		background: #00809F;
		border-radius: 8rpx;
		text-align: center;
		color: #FFF;
		font-size: 26rpx;
		line-height: 48rpx;
	}

	.tabbar {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		width: 750rpx;
		justify-content: space-between;

		view {
			background-color: #E9E9E9;
			width: 420rpx;
			text-align: center;
			line-height: 100rpx;
			height: 100rpx;
		}

		view:nth-child(1) {}

		view:nth-child(2) {}
	}

	.info {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		margin-top: 22rpx;
	}

	.weiactive {
		display: initial;
	}

	.active {
		color: #00809F;
	}

	.active::after {
		color: #00809F;
		content: '';
		width: 34rpx;
		height: 6rpx;
		background: #00809F;
		border-radius: 4rpx;
		text-align: center;
	}

	.fenqu {
		width: 670rpx;
		background-color: #F1F3F6;
		height: 260rpx;
		border-radius: 16rpx;
		margin-top: 20rpx;

		input {
			margin: 0 auto;
			background-color: #FFF;
			width: 248rpx;
			height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			border-radius: 16rpx;
			padding: 0 10rpx;
			margin-bottom: 30rpx;
		}

		input:nth-child(3) {
			margin-top: 20rpx;
		}
	}

	.u-page__tag-item {
		margin-right: 20px;
	}

	.scroll {
		white-space: nowrap;
		height: 50rpx;
		display: flex;
		width: 100%;
		justify-content: space-between;
		overflow: hidden;
		margin-top: 10rpx;
		margin-bottom: 20rpx;

		text {
			position: relative;
			margin: 0rpx 20rpx;
			font-size: 26rpx;
		}
	}

	.btn {
		width: 630rpx;
		height: 85rpx;
		background: #00809F;
		border-radius: 16rpx;
		color: #FFF;
		margin-top: 20rpx;
		font-size: 32rpx;
		line-height: 85rpx;
	}

	.weisele {
		width: 130rpx;
		height: 48rpx;
		background: #00809F;
		border-radius: 8rpx;
		opacity: 0.4;
		text-align: center;
		color: #FFF;
		font-size: 26rpx;
		line-height: 48rpx;
	}

	.info-text {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		margin-top: 22rpx;

		input {
			width: 460rpx;
			height: 2rpx;
			font-size: 26rpx;
			border: none;
			border-bottom: 1rpx solid #DADDE1;
			padding-bottom: 10rpx;
		}
	}

	.name {
		width: 200rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.info-text-textarea {
		width: 670rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		margin-top: 22rpx;

		textarea {
			width: 630rpx;
			height: 148rpx;
			padding: 10rpx 20rpx;
			border-radius: 16rpx;
			border: 2rpx solid #DADDE1;
			margin-top: 20rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}

		.name {
			font-size: 26rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 36rpx;
		}
	}
</style>
